<!--
 * @Author: 颜礼田 2564217790@qq.com
 * @Date: 2024-09-10 16:13:20
 * @LastEditors: 颜礼田 2564217790@qq.com
 * @LastEditTime: 2024-09-10 16:18:07
 * @FilePath: /webServerAdmin/src/views/system/accountManage/components/role.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <el-dialog width="62vw" title="选择权限" v-model="visible">
    <div class="table">
      <ProTable ref="proTableRef" :columns="columns" :request-api="fetchRoleList"> </ProTable>
    </div>
    <template #footer>
      <div>
        <el-button @click="visible = false">取消</el-button>
        <el-button type="primary" @click="submit">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import ProTable from "@/components/ProTable/index.vue";
import { ColumnProps, ProTableInstance } from "@/components/ProTable/interface";
import { RoleSchema } from "@/schema";
import { fetchRoleList } from "@/api/modules/roles";
import { nextTick } from "vue";
import { isNotEmpty, uniqueByProps } from "@/utils/isHelper";
import { EmitProps } from "@/typings/interface";

const visible = ref();
const proTableRef = ref<ProTableInstance>();

const columns: Array<ColumnProps> = [
  { type: "selection", label: "选择", width: 80, fixed: "left" },
  { type: "index", label: "#", width: 80, fixed: "left" },
  { label: "角色名称", prop: "roleName", search: { el: "input" } }
];

const emit = defineEmits<EmitProps>();
function submit() {
  const selected = proTableRef.value?.selectedList;
  visible.value = false;
  const emitValues = uniqueByProps(selected!, "id");
  emit("success", emitValues);
}

defineExpose({
  open(row: Array<RoleSchema>) {
    visible.value = true;
    nextTick(() => {
      if (isNotEmpty(row)) row.forEach(ele => proTableRef.value?.element?.toggleRowSelection(ele, true));
    });
  }
});
</script>

<style lang="scss" scoped>
.table {
  &:deep(.card) {
    padding: 0;
    border: none;
    box-shadow: none;
  }
}
</style>
